<template>
  <div class="learning-plan-detail-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>{{ currentTitle }} 学习计划</h1>
      <p>{{ currentDescription }}</p>
    </div>
    
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <router-link to="/learningPlan">学习计划</router-link>
      <span>&gt;</span>
      <span>{{ currentTitle }}</span>
    </div>
    
    <!-- 子分类区域 (当选择了主职业后显示) -->
    <div v-if="selectedCareer && selectedCareer.subcategories && selectedCareer.subcategories.length > 0" class="subcategory-section">
      <h2>专业细分</h2>
      <div class="subcategory-list">
        <div 
          v-for="subcat in selectedCareer.subcategories" 
          :key="subcat.id"
          class="subcategory-item"
          @click="selectSubcategory(subcat)"
          :class="{ 'active': selectedSubcategory?.id === subcat.id }"
        >
          {{ subcat.name }}
        </div>
      </div>
    </div>
    
    <!-- 学习资源推荐区域 -->
    <div class="learning-resources">
      <h2>{{ getCurrentTitle() }} 学习资源推荐</h2>
      
      <!-- 推荐书籍 -->
      <div class="resource-section">
        <h3><i class="el-icon-book"></i> 推荐书籍</h3>
        <div class="resource-grid">
          <div 
            v-for="book in getRecommendedBooks()" 
            :key="book.id"
            class="resource-item book"
          >
            <div class="book-cover">{{ book.icon }}</div>
            <div class="resource-info">
              <h4>{{ book.title }}</h4>
              <p class="author">作者：{{ book.author }}</p>
              <p class="description">{{ book.description }}</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 推荐网站 -->
      <div class="resource-section">
        <h3><i class="el-icon-link"></i> 推荐网站</h3>
        <div class="website-list">
          <a 
            v-for="website in getRecommendedWebsites()" 
            :key="website.id"
            href="#" 
            class="website-item"
            @click.prevent="openWebsite(website.url)"
          >
            <i class="el-icon-globe"></i>
            <span>{{ website.name }}</span>
            <span class="url">{{ website.url }}</span>
          </a>
        </div>
      </div>
      
      <!-- 推荐视频 -->
      <div class="resource-section">
        <h3><i class="el-icon-video-camera"></i> 推荐视频课程</h3>
        <div class="resource-grid">
          <div 
            v-for="video in getRecommendedVideos()" 
            :key="video.id"
            class="resource-item video"
          >
            <div class="video-thumbnail">{{ video.icon }}</div>
            <div class="resource-info">
              <h4>{{ video.title }}</h4>
              <p class="platform">平台：{{ video.platform }}</p>
              <p class="duration">时长：{{ video.duration }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const selectedCareer = ref(null);
const selectedSubcategory = ref(null);

// 专业数据
const majors = [
  {id:'computer',name:'计算机专业',description:'计算机专业介绍',icon:'💻',
    resources: {
      books: [
        { id: 1, title: '计算机科学导论', author: '雷蒙德·史蒂文斯', description: '计算机科学基础入门', icon: '📚' },
        { id: 2, title: '数据结构与算法', author: '严蔚敏', description: '数据结构经典教材', icon: '📖' },
        { id: 3, title: '计算机网络', author: '谢希仁', description: '计算机网络基础理论', icon: '📕' }
      ],
      websites: [
        { id: 1, name: '中国计算机学会', url: 'https://www.ccf.org.cn' },
        { id: 2, name: 'CSDN', url: 'https://www.csdn.net' },
        { id: 3, name: 'GitHub', url: 'https://github.com' }
      ],
      videos: [
        { id: 1, title: '计算机科学基础', platform: 'Coursera', duration: '60小时', icon: '🎓' },
        { id: 2, title: '编程基础入门', platform: '慕课网', duration: '40小时', icon: '🎥' }
      ]
    }
  },
  {id:'finance',name:'金融专业',description:'金融专业介绍',icon:'💰',
    resources: {
      books: [
        { id: 1, title: '金融学', author: '黄达', description: '金融学基础理论', icon: '📚' },
        { id: 2, title: '公司金融', author: '罗斯', description: '公司金融经典教材', icon: '📖' },
        { id: 3, title: '投资学', author: '博迪', description: '投资学基础理论', icon: '📕' }
      ],
      websites: [
        { id: 1, name: '中国金融学会', url: 'https://www.cfs.org.cn' },
        { id: 2, name: '中国人民银行', url: 'http://www.pbc.gov.cn' },
        { id: 3, name: '上海证券交易所', url: 'http://www.sse.com.cn' }
      ],
      videos: [
        { id: 1, title: '金融学原理', platform: '中国大学MOOC', duration: '50小时', icon: '🎓' },
        { id: 2, title: '投资分析入门', platform: 'Coursera', duration: '45小时', icon: '🎥' }
      ]
    }
  }
];

// 职业数据
const careers = [
  {
    id: 'lawyer',
    name: '律师',
    description: '为客户提供法律咨询和代理服务',
    icon: '⚖️',
    subcategories: [
      { id: 'criminal', name: '刑法' },
      { id: 'economic', name: '经济法' },
      { id: 'civil', name: '民法' },
      { id: 'intellectual', name: '知识产权法' }
    ],
    resources: {
      books: [
        { id: 1, title: '刑法学', author: '张明楷', description: '系统讲解刑法理论与实践', icon: '📚' },
        { id: 2, title: '民法学', author: '王利明', description: '民法基本理论与案例分析', icon: '📖' },
        { id: 3, title: '法学方法论', author: '拉伦茨', description: '法律适用的逻辑与技术', icon: '📕' }
      ],
      websites: [
        { id: 1, name: '中国法律法规数据库', url: 'https://www.lawinfochina.com' },
        { id: 2, name: '中国裁判文书网', url: 'https://wenshu.court.gov.cn' },
        { id: 3, name: '法律图书馆', url: 'http://www.law-lib.com' }
      ],
      videos: [
        { id: 1, title: '法律职业资格考试培训', platform: '厚大法考', duration: '120小时', icon: '🎓' },
        { id: 2, title: '案例分析实战课', platform: '瑞达法考', duration: '80小时', icon: '🎥' }
      ]
    },
    subcategoryResources: {
      criminal: {
        books: [
          { id: 1, title: '刑法学（上下册）', author: '高铭暄', description: '刑法学经典教材', icon: '📚' },
          { id: 2, title: '刑法分则实务研究', author: '赵秉志', description: '刑法分则深度解析', icon: '📖' }
        ],
        websites: [
          { id: 1, name: '中国刑事法律网', url: 'http://www.criminallaw.com.cn' },
          { id: 2, name: '刑事案例指导', url: 'http://www.xsalfx.com' }
        ],
        videos: [
          { id: 1, title: '刑法总则精讲', platform: '柏杜法考', duration: '60小时', icon: '🎓' }
        ]
      },
      economic: {
        books: [
          { id: 1, title: '经济法学', author: '漆多俊', description: '经济法基础理论', icon: '📚' },
          { id: 2, title: '公司法教程', author: '施天涛', description: '公司法理论与实务', icon: '📖' }
        ],
        websites: [
          { id: 1, name: '中国经济法网', url: 'http://www.cel.cn' },
          { id: 2, name: '经济法研究', url: 'http://www.economiclaw.cn' }
        ]
      },
      civil: {
        books: [
          { id: 1, title: '民法典条文理解与适用', author: '最高人民法院', description: '民法典权威解读', icon: '📚' },
          { id: 2, title: '民法总则研究', author: '梁慧星', description: '民法总则深入研究', icon: '📖' }
        ],
        websites: [
          { id: 1, name: '中国民商法律网', url: 'http://www.civillaw.com.cn' },
          { id: 2, name: '民法研究中心', url: 'http://www.civillawcenter.com' }
        ]
      }
    }
  },
  {
    id: 'programmer',
    name: '程序员',
    description: '设计、开发和维护软件系统',
    icon: '💻',
    subcategories: [
      { id: 'java', name: 'Java开发' },
      { id: 'csharp', name: 'C#开发' },
      { id: 'python', name: 'Python开发' },
      { id: 'frontend', name: '前端开发' },
      { id: 'backend', name: '后端开发' }
    ],
    resources: {
      books: [
        { id: 1, title: '代码整洁之道', author: 'Robert C. Martin', description: '编写可读、可维护的代码', icon: '📚' },
        { id: 2, title: '算法导论', author: 'Thomas H. Cormen', description: '算法设计与分析', icon: '📖' },
        { id: 3, title: '设计模式', author: 'Erich Gamma', description: '面向对象设计的最佳实践', icon: '📕' }
      ],
      websites: [
        { id: 1, name: 'GitHub', url: 'https://github.com' },
        { id: 2, name: 'Stack Overflow', url: 'https://stackoverflow.com' },
        { id: 3, name: 'MDN Web Docs', url: 'https://developer.mozilla.org' }
      ],
      videos: [
        { id: 1, title: '编程基础入门', platform: '慕课网', duration: '40小时', icon: '🎓' },
        { id: 2, title: '数据结构与算法实战', platform: '极客时间', duration: '60小时', icon: '🎥' }
      ]
    },
    subcategoryResources: {
      java: {
        books: [
          { id: 1, title: 'Java核心技术', author: 'Cay S. Horstmann', description: 'Java全面指南', icon: '📚' },
          { id: 2, title: 'Effective Java', author: 'Joshua Bloch', description: 'Java编程最佳实践', icon: '📖' }
        ],
        websites: [
          { id: 1, name: 'Oracle Java文档', url: 'https://docs.oracle.com/en/java/' },
          { id: 2, name: 'Java World', url: 'https://www.javaworld.com' }
        ]
      },
      python: {
        books: [
          { id: 1, title: 'Python编程：从入门到实践', author: 'Eric Matthes', description: 'Python初学者指南', icon: '📚' },
          { id: 2, title: '流畅的Python', author: 'Luciano Ramalho', description: 'Python高级编程技巧', icon: '📖' }
        ],
        websites: [
          { id: 1, name: 'Python官方文档', url: 'https://docs.python.org/3/' },
          { id: 2, name: 'Real Python', url: 'https://realpython.com' }
        ]
      }
    }
  },
  // 其他职业数据...
  {
    id: 'accountant',
    name: '会计',
    description: '负责财务核算和财务管理',
    icon: '📊',
    resources: {
      books: [
        { id: 1, title: '会计学原理', author: '葛家澍', description: '会计学基础知识', icon: '📚' },
        { id: 2, title: '财务会计', author: '戴德明', description: '财务会计理论与实务', icon: '📖' }
      ],
      websites: [
        { id: 1, name: '中国会计学会', url: 'https://www.asc.org.cn' },
        { id: 2, name: '财政部会计司', url: 'http://kjs.mof.gov.cn' }
      ],
      videos: [
        { id: 1, title: '会计从业资格培训', platform: '中华会计网校', duration: '100小时', icon: '🎓' }
      ]
    }
  }
];

// 获取当前数据（专业或职业）
const currentData = computed(() => {
  if (route.params.type === 'major') {
    return majors.find(m => m.id === route.params.id);
  } else if (route.params.type === 'career') {
    return careers.find(c => c.id === route.params.id);
  }
  return null;
});

// 当前标题
const currentTitle = computed(() => {
  return currentData.value ? currentData.value.name : '学习计划';
});

// 当前描述
const currentDescription = computed(() => {
  return currentData.value ? currentData.value.description : '';
});

// 选择子分类
const selectSubcategory = (subcat) => {
  selectedSubcategory.value = subcat;
};

// 获取当前标题（职业或子分类）
const getCurrentTitle = () => {
  if (selectedSubcategory.value) {
    return selectedSubcategory.value.name;
  }
  return currentData.value.name;
};

// 获取推荐书籍
const getRecommendedBooks = () => {
  if (route.params.type === 'major') {
    return currentData.value?.resources?.books || [];
  } else if (route.params.type === 'career') {
    if (selectedSubcategory.value && currentData.value.subcategoryResources && currentData.value.subcategoryResources[selectedSubcategory.value.id] && currentData.value.subcategoryResources[selectedSubcategory.value.id].books) {
      return currentData.value.subcategoryResources[selectedSubcategory.value.id].books;
    }
    return currentData.value?.resources?.books || [];
  }
  return [];
};

// 获取推荐网站
const getRecommendedWebsites = () => {
  if (route.params.type === 'major') {
    return currentData.value?.resources?.websites || [];
  } else if (route.params.type === 'career') {
    if (selectedSubcategory.value && currentData.value.subcategoryResources && currentData.value.subcategoryResources[selectedSubcategory.value.id] && currentData.value.subcategoryResources[selectedSubcategory.value.id].websites) {
      return currentData.value.subcategoryResources[selectedSubcategory.value.id].websites;
    }
    return currentData.value?.resources?.websites || [];
  }
  return [];
};

// 获取推荐视频
const getRecommendedVideos = () => {
  if (route.params.type === 'major') {
    return currentData.value?.resources?.videos || [];
  } else if (route.params.type === 'career') {
    if (selectedSubcategory.value && currentData.value.subcategoryResources && currentData.value.subcategoryResources[selectedSubcategory.value.id] && currentData.value.subcategoryResources[selectedSubcategory.value.id].videos) {
      return currentData.value.subcategoryResources[selectedSubcategory.value.id].videos;
    }
    return currentData.value?.resources?.videos || [];
  }
  return [];
};

// 打开网站
const openWebsite = (url) => {
  window.open(url, '_blank');
};

// 组件挂载时初始化数据
onMounted(() => {
  if (route.params.type === 'career') {
    selectedCareer.value = currentData.value;
  }
});
</script>

<style scoped>
/* 主容器样式 */
.learning-plan-detail-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
  margin-bottom: 20px;
}

.page-header h1 {
  font-size: 36px;
  color: #2c3e50;
  margin-bottom: 10px;
  font-weight: 700;
}

.page-header p {
  font-size: 18px;
  color: #7f8c8d;
}

/* 面包屑导航 */
.breadcrumb {
  margin-bottom: 30px;
  font-size: 14px;
  color: #7f8c8d;
}

.breadcrumb a {
  color: #3498db;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb span {
  margin: 0 8px;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* 子分类区域 */
.subcategory-section {
  margin-bottom: 40px;
}

.subcategory-section h2 {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 15px;
  text-align: center;
}

.subcategory-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.subcategory-item {
  background: white;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: #555;
}

.subcategory-item:hover {
  background-color: #3498db;
  color: white;
}

.subcategory-item.active {
  background-color: #3498db;
  color: white;
}

/* 学习资源区域 */
.learning-resources {
  background: white;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.learning-resources h2 {
  font-size: 24px;
  color: #2c3e50;
  margin-bottom: 30px;
  text-align: center;
}

/* 资源区块样式 */
.resource-section {
  margin-bottom: 40px;
}

.resource-section:last-child {
  margin-bottom: 0;
}

.resource-section h3 {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ecf0f1;
}

/* 资源网格布局 */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.resource-item {
  display: flex;
  gap: 15px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.resource-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.book-cover,
.video-thumbnail {
  font-size: 36px;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3f2fd;
  border-radius: 8px;
}

.resource-info h4 {
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 5px;
}

.resource-info p {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 3px;
}

/* 网站列表样式 */
.website-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.website-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  color: #3498db;
}

.website-item:hover {
  background-color: #3498db;
  color: white;
  transform: translateX(5px);
}

.website-item i {
  font-size: 18px;
}

.website-item .url {
  font-size: 12px;
  margin-left: auto;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }
  
  .learning-resources {
    padding: 20px;
  }
  
  .page-header h1 {
    font-size: 28px;
  }
}
</style>